<template>
  <!--主内容-->
  <div class="">
    <!--banner-->
    <div class="banner" v-if="banners.length > 0">
      <a v-if="banners[0].path" :href="banners[0].path" target="_blank">
        <img :src="banners[0].picturePath | imgCdn" :alt="banners[0].name"/>
      </a>

      <a v-else>
        <img :src="banners[0].picturePath | imgCdn" :alt="banners[0].name"/>
      </a>
    </div>

    <!--面包屑-->
    <!--<header class="breadcrumb-wrap container">-->
    <!--<el-breadcrumb class="breadcrumb pull-left" separator=">">-->
    <!--<span class="pull-left">当前位置：</span>-->
    <!--<el-breadcrumb-item>-->
    <!--<nuxt-link class="text-primay-hover" target="_blank" :to="{ path: '/' }">首页</nuxt-link>-->
    <!--</el-breadcrumb-item>-->
    <!--<el-breadcrumb-item>检测服务</el-breadcrumb-item>-->
    <!--</el-breadcrumb>-->
    <!--</header>-->

    <!--服务流程-->
    <section class="chunk service-process">
      <div class="container">
        <header class="text-center">
          <h2 class="title">服务流程</h2>
        </header>
      </div>

      <div class="content container">
        <ul class="process clearfix">
          <li>
            <div class="img-box">
              <img src="~assets/img/test-1.png" alt="">
            </div>
            <p class="desc">注册聚贸矿产会员</p>
          </li>
          <li>
            <div class="img-box">
              <img alt="">
            </div>
          </li>
          <li>
            <div class="img-box">
              <img src="~assets/img/test-2.png" alt="">
            </div>
            <p class="desc">机构接单检验</p>
          </li>
          <li>
            <div class="img-box">
              <img src="" alt="">
            </div>
          </li>
          <li>
            <div class="img-box">
              <img src="~assets/img/test-3.png" alt="">
            </div>
            <p class="desc">送采样检验</p>
          </li>
          <li>
            <div class="img-box">
              <img src="" alt="">
            </div>
          </li>
          <li>
            <div class="img-box">
              <img src="~assets/img/test-4.png" alt="">
            </div>
            <p class="desc">上传检验单</p>
          </li>
          <li>
            <div class="img-box">
              <img src="" alt="">
            </div>
          </li>
          <li>
            <div class="img-box">
              <img src="~assets/img/test-5.png" alt="">
            </div>
            <p class="desc">完成检测</p>
          </li>
        </ul>

        <div class="text-center">
          <a :href="`${platform.CONSTANT_JUMORE_CERT_URL}`" target="_blank" class="apply">立即申请</a>
        </div>
      </div>
    </section>


    <!--服务流程-->
    <section class="chunk">
      <div class="container">
        <header class="text-center">
          <h2 class="title">合作机构</h2>
        </header>

        <div class="content">
          <ul class="partners">
            <li v-for="p in partners" :key="p.adId">
              <a :href="p.path" target="_blank" v-if="p.path">
                <img v-lazyload.cdn="p.picturePath" :alt="p.name" :title="p.name">
                <div class="mark">
                  <span>{{ p.name }}</span>
                </div>
              </a>

              <a v-else>
                <img v-lazyload.cdn="p.picturePath" :alt="p.name" :title="p.name">
                <div class="mark">
                  <span>{{ p.name }}</span>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import platform from '~/config/platform'
  import axios from '~/plugins/axios'
  import Share from '~/components/Share'
  import SideBar from '~/components/News/SideBar'

  export default {
    components: {
      Share,
      SideBar
    },

    data () {
      return {
        platform
      }
    },

    head () {
      let seo = {
        title: `矿产品化验检测 - 聚贸矿产`,
        desc: `聚贸矿产化验检测专区，专业检测机构入驻，为您提供一站式矿产品化验检测，线上线下无缝对接，快速获取检测报告，为您的矿产交易保驾护航。`
      }
      return {
        title: seo.title,
        meta: [{
          hid: 'description',
          name: 'description',
          content: seo.desc
        }]
      }
    },

    methods: {},

    async asyncData ({query, store}) {

      const store_adv = store.state.advs.testAdv || [] //SET_TESTADV
      const getBanners = () => {
        if (!Array.isArray(store_adv) || store_adv.length === 0) {
          return axios.get('/testing/topAdv').then(data => data.data)
        } else {
          return Promise.resolve(store_adv)
        }
      }
      // 获取数据
      const [{
        data: banners = []
      }, {data: partners = []}
      ] = await Promise.all([
        getBanners(),
        axios.get('/testing/cooperateOrg').then(data => data.data)
      ])

      console.log(banners)
      return {
        banners,
        partners
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../element-variables.scss";

  .banner {
    height: 500px;
    overflow: hidden;

    a {
      display: block;
      width: 100%;
    }

    img {
      height: 500px;
      transform: translateX(-50%);
      position: relative;
      left: 50%;
    }
  }

  .chunk {
    &.service-process {
      background-color: #f5f5f5;
      .content {
        padding: 60px 0;
      }
    }

    .process {
      width: 1200px;
      margin: 0 auto;
      padding: 0 0 65px;

      .desc {
        font-size: 20px;
        color: #6e6e6e;
        padding-top: 20px;
        letter-spacing: -1px;
      }
      li {
        width: 160px;
        float: left;
        text-align: center;

        .img-box {
          width: 120px;
          height: 120px;
          margin: 0 auto;

          img {
            top: 50%;
            position: relative;
            transform: translateY(-50%);
          }
        }

        &:nth-child(2n+1) {
          .img-box {
            border-radius: 100%;
            background-color: $--color-primary;
            background-position: center;
          }
        }

        &:nth-child(2n) {
          width: 100px;

          .img-box {
            width: 100px;
            background: url("~assets/img/arrow.png") no-repeat center;
          }
        }

        &:nth-child(2n+1):hover {
          .img-box {
            background-color: $--color-primary-light-1;
          }
        }
      }
    }

    .apply {
      font-size: 18px;
      width: 140px;
      line-height: 42px;
      background-color: transparent;
      border-radius: 4px;
      color: $--color-primary;
      display: inline-block;
      text-align: center;
      border: 1px solid $--color-primary;

      &:hover {
        background-color: $--color-primary;
        color: #fff;
      }
    }
    header {
      text-align: center;

      .title {
        font-size: 36px;
        font-weight: normal;
        color: #3e3e3e;
        line-height: 47px;
        padding: 55px 0 20px;
        position: relative;

        &:after {
          position: absolute;
          width: 73px;
          height: 3px;
          background-color: $--color-primary;
          content: '';
          bottom: -3px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }

    .content {
      padding: 60px 0 25px;
    }
  }

  .partners {
    margin-right: -25px;
    overflow: hidden;

    li {
      margin: 0 25px 25px 0;
      float: left;
      position: relative;
      overflow: hidden;
      height: 190px;
      width: 380px;

      img {
        border: 1px solid #dedede;
        width: 380px;
        height: 190px;
      }

      &:hover {
        .mark {
          bottom: 0;
        }
      }
    }

    .mark {
      transition: all .3s;
      left: 0;
      bottom: -100%;
      padding: 60px 0 36px;
      color: #fff;
      width: 100%;


      height: 100%;
      overflow: hidden;
      position: absolute;
      background-color: rgba(#e8af68, .9);

      span {
        text-align: center;
        position: absolute;
        font-size: 18px;
        width: 100%;
        padding: 0 20px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
</style>
